import React, { Component, useState, useEffect, useRef } from 'react';


// class Txt extends Component {
// 	componentWillUnmount() {
// 		console.log("我要卸载")
// 	}

// 	render() {
// 		let { text, setEidt } = this.props;
// 		return (
// 			<div>
// 				{text} <a onClick={() => {
// 					setEidt && setEidt(true);
// 				}} >编辑</a>
// 			</div>
// 		)
// 	}
// }

// class Effect extends Component {
// 	state = {
// 		text: '我要开始编辑',
// 		isEied: false
// 	}
// 	componentWillMount() {
// 		console.log("componentWillMount");
// 	}
// 	componentDidMount() {
// 		console.log("挂载完成")
// 	}
// 	componentDidUpdate() {
// 		console.log("组建更新")
// 	}

// 	_setEidt = (isEied) => {
// 		this.setState({
// 			isEied
// 		})
// 	}

// 	render() {
// 		let { text, isEied } = this.state
// 		return (
// 			<div>
// 				{isEied ?
// 					<input value={text} onChange={(e) => {
// 						this.setState({
// 							text: e.target.value
// 						})
// 					}}
// 						onBlur={() => {
// 							this._setEidt(false);
// 						}}
// 					/> :
// 					<Txt text={text} setEidt={this._setEidt} />
// 				}</div>
// 		)
// 	}
// }


function Txt(props) {
	let { text, setEidt } = props;
	return (
		<div>
			{text} <a onClick={() => {
				setEidt && setEidt(true);
			}} >编辑</a>
		</div>
	)
}

function InputCtp(props) {
	let { text, setText, setIsEied } = props;
	let refInput = useRef(null);
	useEffect(() => {
		console.log("input组建");
		console.log("refInput", refInput)
		var inputObj = refInput.current;
		function toScroll() {
			let y = window.scrollY;
			inputObj.style.transform = `translateY(${y}px)`
		}
		window.addEventListener('scroll', toScroll);
		console.log("inputObj", inputObj)
		inputObj.focus();
		return () => {
			console.log("input卸载");
			window.removeEventListener('scroll', toScroll);
		}

	}, [])

	return (<input id="input" ref={refInput} value={text} onChange={(e) => {
		setText(e.target.value);
	}}
		onBlur={() => {
			setIsEied(false);
		}}
	/>)

}



function Effect() {
	let [text, setText] = useState("我要开始编辑");
	let [isEied, setIsEied] = useState(false);


	function _setEidt(isEied) {
		setIsEied(isEied);
	}

	useEffect(() => {
		console.log("text-change");
	}, [isEied])
	return (
		<div>
			{isEied ?
				<InputCtp text={text} setText={setText} setIsEied={setIsEied} /> :
				<Txt text={text} setEidt={_setEidt} />
			}
			{[...(".".repeat(100))].map((item, index) => {
				return <div key={index}>erased</div>
			})}

		</div>
	)
}
export default Effect;